React でマインスイーパーを作った
https://gyazo.com/e99e2c4c7ad8f40c94456498a1a22712
React は今までに何度かドキュメント読んだり少し触ってみたりしていて、その度になんか途中で飽きたりして何も形にできていなかったので、小さなものでもいいから何か作ってみようと思って簡単そうなマインスイーパーを作ってみた。 案の定比較的簡単にできて、しかも色々と学びもあったのでよかった
変な qiita の記事とかに惑わされずに公式のドキュメント読んだら簡単だった(今まで gulp とか browserify とか色々触っていたのもあるけど)
webpack-dev-server がよい
基本的には webpack の設定ファイルを書いておいて、 webpack-dev-server をそのまま実行するだけで静的ファイルのサーブと、 JS ファイルたちのコンパイル(ファイルの変更があれば再コンパイル)までやってくれる。
browserify 使って npm script 書くよりも楽な感じがした
モジュールのインストールが早い(?)(らしい)
体感的に少し早いかも? レベル
yarn run hoge で ./node_module/.bin/hoge を実行してくれるのが個人的にすごく嬉しい
npm にも同じ機能があるのかもしれない。調べてないけど
仕事でもプライベートでもあまり使ってないので、 npm との違いとかは他にはまだ体感していない
ES6+ クラスまたは関数でコンポーネントが書けて幸せ
view 書くのがとにかく楽になるし楽しい
イベントハンドラにコンポーネントのメソッドを渡すときに this.someMethod.bind(this) か (e) => this.someMethod(e) と書くのが少し面倒だけどまあ気にはならない
state のオブジェクトを変更してから setState するのがなんかダサく見えたので、なんとなく使ってみた
immutable.js のオブジェクトを受け取って immutable.js のオブジェクトを返す関数をたくさん書く
表示部分とビジネスロジックが分離できた(?)
同じオブジェクトを何度も更新するとき
for とかで書くと何度も変数に代入する処理を書く必要がある → ダサい
そこで、map, reduce とか再帰で書く
そこだけ関数型プログラミングみたいになってる
そもそもなんで immutable.js ができたんだろう?
↑ 少し読んでみたけど、面白かった
個人的にびっくりしたのは、 immutable を使った方が高速になるケースもあるということ
イミュータブルというのは何度もオブジェクトを再生成するのでメモリに優しくないイメージがあったが、必ずしもそうではない
trie を使ってイミュータブルなデータを表現することで、データを変更した場合でも前のデータの変更されてない部分を再利用することであまりメモリを使わないようになっているらしい
ソース少し読んでみたけど、全然わからなかった
仕組みは少しわかったので、また再チャレンジしたい
課題
自分のサーバーに置いて公開する
盤面のサイズ、難易度を選択できるようにする
別の何かを作る
追記
簡単で超便利
無料だし自分のドメイン使える
いろいろ変更した
一つの理由は、雑に作ったので変な使い方をしていたっぽかったから
メンテが停滞気味なので最近は積極的に使っていない
盤面のサイズと爆弾が出現する頻度を調節できるようにした